<template>
    <div>
        <el-dialog :close-on-click-modal="false" :show-close="false" :align-center="true" :model-value="dialogVisible"
            height="500px" width="800px" title="新增试题">
            <el-form ref="form" label-width="100px" :rules="rules">
                <el-form-item label="题目类型" prop="questionType">
                    <el-select v-model="formData.questionType" placeholder="请选择题目类型" @change="handleQuestionTypeChange">
                        <el-option label="选择题" value="选择题" />
                        <el-option label="填空题" value="填空题" />
                        <el-option label="多选题" value="多选题" />
                        <el-option label="判断题" value="判断题" />
                        <el-option label="组合题" value="组合题" />
                    </el-select>
                </el-form-item>
                <el-form-item label="题干" prop="questionContent">
                    <div>
                        <quill-editor ref="questionEditor" contentType="text" v-model:content="formData.questionContent" />
                    </div>
                </el-form-item>
                <template v-if="formData.questionType === '选择题'">
                    <el-form-item label="选项内容" prop="options">
                        <div class="options-container">
                            <div v-for="(option, index) in formData.options" :key="index" class="option-item">
                                {{ option.label }}:
                                <quill-editor contentType="text" v-model:content="option.content" />
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="答案" prop="answerOption">
                        <el-radio-group v-model="formData.answerOption">
                            <el-radio v-for="(option, index) in formData.options" :key="index" :label="option.label">
                                {{ option.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </template>
                <template v-if="formData.questionType === '判断题'">
                    <el-form-item label="答案" prop="answerOption">
                        <el-radio-group v-model="formData.answerOption">
                            <el-radio label="A">正确</el-radio>
                            <el-radio label="B">错误</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </template>
                <template v-if="formData.questionType === '多选题'">
                    <el-form-item label="选项内容" prop="options">
                        <div class="options-container">
                            <div v-for="(option, index) in formData.options" :key="index" class="option-item">
                                {{ option.label }}:
                                <quill-editor contentType="text" v-model:content="option.content" />
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="答案" prop="answerOption">
                        <el-checkbox-group v-model="formData.answerOption">
                            <el-checkbox v-for="(option, index) in formData.options" :key="index" :label="option.label">
                                {{ option.label }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </template>
                <template v-if="formData.questionType === '填空题'">
                    <el-form-item label="答案" prop="answer">
                        <div class="quill-container">
                            <quill-editor contentType="text" v-model:content="formData.answer" :height="200" />
                        </div>
                    </el-form-item>
                </template>
                <template v-if="formData.questionType === '组合题'">
                    <el-form-item label="子试题" prop="subQuestions">
                        <div v-for="(subQuestion, index) in formData.subQuestions" :key="index">
                            <div class="sub-question-item">
                                <div class="sub-question-label">子试题 {{ index + 1 }}:</div>
                                <div class="sub-question-content">
                                    <quill-editor contentType="text" v-model:content="subQuestion.questionContent" />
                                </div>
                                <div class="sub-question-answer">
                                    答案: <quill-editor contentType="text" v-model:content="subQuestion.answer" />
                                </div>
                                <div class="delete-sub-question-btn">
                                    <el-button type="danger" @click="deleteSubQuestion(index)">删除子试题</el-button>
                                </div>
                            </div>
                        </div>
                        <div class="add-sub-question-btn">
                            <el-button type="primary" @click="addSubQuestion">添加子试题</el-button>
                        </div>
                    </el-form-item>
                </template>

                <el-form-item label="试题标签" prop="tag">
                    <el-select v-model="formData.tag" placeholder="请输入试题标签">
                        <el-option label="基础算法" value="基础算法" />
                        <el-option label="桟与队列" value="桟与队列" />
                        <el-option label="二叉树" value="二叉树" />
                        <el-option label="排序算法" value="排序算法" />
                    </el-select>
                </el-form-item>
                <el-form-item label="分值" prop="score">
                    <el-input style="width: 400px" v-model="formData.score" placeholder="请输入分值" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">提交</el-button>
                    <el-button type="danger" @click="dialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { string } from 'jszip/lib/support';

const dialogVisible = ref(false)

const formData = ref({
    questionType: '选择题',
    questionContent: '',
    options: [
        { label: 'A', content: '' },
        { label: 'B', content: '' },
        { label: 'C', content: '' },
        { label: 'D', content: '' },
    ],
    answerOption: [],
    tag: '',
    score: '',
    subQuestions: [],
    answer: ''
})

const form = ref()
const questionEditor = ref()

const handleQuestionTypeChange = () => {
    formData.value.answer = ''
    formData.value.subQuestions = []
    formData.value.options.forEach((option) => {
        option.content = ''
    })
    formData.value.answerOption = []
    questionEditor.value.setHTML('')
    formData.value.tag = ''
    formData.value.score = ''
    form.value.resetFields()
}

const addSubQuestion = () => {
    formData.value.subQuestions.push({
        questionContent: '',
        answer: ''
    })
}

const deleteSubQuestion = (index) => {
    formData.value.subQuestions.splice(index, 1)
}

const submitForm = () => {
    console.log('formData', formData.value)
}

const open = (obj) => {
    dialogVisible.value = true
    // console.log('open obj ', obj);
    if (!obj) {
        // 添加
    } else {
        // 编辑

    }
}

defineExpose({
    open
})
</script>


<style lang="scss" scoped>
:deep(.el-dialog__body) {
    max-height: calc(100vh - 300px);
    overflow: auto;
}

.options-container {
    display: flex;
    flex-direction: column;

    .option-item {
        margin-bottom: 10px;
    }
}

.quill-container {
    /* height: 200px; */
    overflow: auto;
}

.sub-question-item {
    margin-bottom: 20px;

    .sub-question-label {
        font-weight: bold;
    }

    .sub-question-content {
        margin-top: 5px;
        margin-bottom: 10px;
    }

    .sub-question-answer {
        margin-top: 5px;
    }

    .delete-sub-question-btn {
        margin-top: 10px;
    }
}

.add-sub-question-btn {
    margin-left: 10px;
}
</style>
